Introduction: Using Styles

Why use Styles?

When the Internet was first used, its primary use was to distribute linked information. As such, the formatting of webpages was not given much consideration. As time went on, more and more people wanted to make their webpages look interesting. Unfortunately, they were limited by the few HTML tags devoted to formatting. In its basic form, HTML only provides a few formatting tags such as heading tags (H1 - H6) and simple character formatting tags (bold, italics, etc.). The initial response to this situation was made by companies developed web browsers. Netscape and Microsoft designed their own custom tags for people to use. This resulted in webpages that could be viewed under one browser, but not another.

In December 1996, the World Wide Web Consortium created style sheets. Style sheets allow authors to separate the form and appearance of their webpages from its content.

What does this actually mean? The content of your webpage is the basic text and various media you use. The form and appearance of your webpage is related to things like text colors, sizes of headings, etc. For example, if you are using the HotDog help reader to view this file and you have Microsoft Internet Explorer installed, you are currently viewing this webpage with the help of style sheets. The main heading above Using Style is the default appearance of the H1 tag. To view this page without style sheets, change the browser you are using to one that doesn't support style sheets. When you change browsers, note that the structure and content of the webpage doesn't change, only the way various bits of text are formatted. This is what is meant by separation of content and form.

Why Separate Content from Form?

One of the key advantages to separating content and form is the reusability of the style definitions. If you store all the formatting instructions in a separate file - and link all your webpages to this file, then you can change the form and appearance of your entire web site by changing only one file. For example, all documents in this help are linked to a file called HotDog6.css. This file contains all the style information. (You can look at this file and even edit it yourself using the Style Sheet Resource Manager).

NOTE

To use HotDog, it is not necessary for you to understand the code by which style sheets are defined. However, we have included an advanced discussion that goes into more detail and containing links to various Internet resources for your edification.

What is "Formatting"?

Formatting a webpage (or indeed, any text) has two aspects: content and the presentation of content. For example, in a newspaper, the content is all the words and the formatting is the different font styles and layout applied to the headings, paragraphs and images. Formatting provides important visual (non-textual) clues to a reader about the way to read an article, what bits are important, what themes are being discussed etc. For example, in this help I use a blue background to indicate a heading.

Like a newspaper, a webpage should use formatting on various parts of text to guide readers through the process of understanding its content.

How is Text Formatted in a Webpage?

Text can be formatted in two ways on a webpage:

Using HTML Tags.
Using Style Sheets.

Using Formatting Tags or Style Sheets to control the Appearance of Your Webpage

The last issue that must be addressed relates to whether style sheets should be used on your website. After all, much of the formatting that style sheets perform can be duplicated using formatting HTML tags, such as , , , etc.

Here are some ideas you should consider:

Not all users' browsers are able to render style sheets - however, if you are careful when associating style definitions with tags, the resulting form of your webpage should still be acceptable.
Every time you use HTML tags to define formatting (e.g. ), you lose some separation of your webpage's content from its form. This has disadvantages as discussed above.